#header {
  position: fixed;
  width: 100%; /* 宽度100% */
  z-index: 9999; /* 确保在顶部 */
  transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out; /* 平滑过渡 */
  transform: translateY(0); /* 初始位置 */
  margin-bottom: 50px
}
#header.hidden-header  {
    transform: translateY(-100%); /* 向上移动，完全移出视口 */
    opacity: 0; /* 隐藏元素 */
}
.header-toggle-all{
    width : 100%;
    height: 60pX;
    display: grid;
    grid-template-columns: 1fr 4fr;
    background-color: #33333375;
    margin:0px;
    }
.header-toggle {
    margin-left:10px;
    display: flex;
    align-content: center;  
    flex : 1 1;
    align-items: center; 
}

.logo{
    text-decoration: none;    
}
.logo-img {
 margin-right: 10px;

}
.logo-title {
    position: relative;
    top: 0px; 
    left: 2px; 
    color: white;
    margin:0;
    margin-left: 10px;
}
.header-subtitle{
 text-align: center;
 word-break: break-all;   
 justify-content: center; 
 align-items: center; 
 margin:auto;
}

.navbar {
    display: flex;
    flex:1; 
    justify-content: right; 
    align-items: right; 
    //padding: 5px 0;
}

.menu {
    list-style: none; 
    padding: 5px 0; 
    display: flex; 
    width: 100%; 
    justify-content: space-between; 
}

.menu-item {
    width : 100%;
    align-items: center; 
    text-align: center; 
    justify-content: center; 
    background-color: #33333350; 
    color: white;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    padding: 5px;
}

.menu-item:hover {
    background-color: #444; 
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 
}
.menu-item-link {
    width 100%; 
    height: 100%; 
    display: grid;
    text-decoration: none; 
    color: white; 
    transition: background-color 0.3s; 
    //margin-left: 8px;
}
.menu-column{
 display: none;    
}
#mobie-header{
 display none;    
}
#mobie-navbar{
 display: none;    
}
@media (max-width: 767px) {
#mobie-header {
 
  position: fixed;
  display block;
  width: 85%; /* 宽度100% */
  z-index: 9999; /* 确保在顶部 */
  transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out; /* 平滑过渡 */
  transform: translateY(0); /* 初始位置 */
  margin-bottom: 50px
}
#mobie-header.hidden-header  {
    transform: translateY(-100%); /* 向上移动，完全移出视口 */
    opacity: 0; /* 隐藏元素 */
}
#header{
 display: none;    
}
.mobie-header-nameicon{
 display: flex;
 justify-content: flex-start;

}
.ilist{
 position :fixed;
 top: 0;
 right:50%;
 z-index: 99999;    
 z-index : 9999;
}
#mobie-navbar>.menu{
 max-width: 100%;
 display: flex;
 flex-direction: column;
 background-color: #333333;
}
     
}
